import React from 'react'

import './ConfirmModal.css'
import Backdrop from '../Backdrop/Backdrop'

const ConfirmModal = (props) => {

  const cancelHandler = ()=>{
    props.onCancel()
  }
  const okHandler = ()=>{
    props.onConfirm()
  }

  return (
    <Backdrop>
      <div className='confirm-modal'>
        <p className='modal-text'>
          {props.text}
        </p>
        <div className='modal-btn'>
          <button className='ok-btn' onClick={okHandler}>确认</button>
          <button onClick={cancelHandler}>取消</button>
        </div>
      </div>
    </Backdrop>

  )
}

export default ConfirmModal